import React, { Component } from "react";
import style from "./index.module.scss";
import Bookinfo from "./BookInfo";
import {connect} from "react-redux"
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
class ShopCart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: null,
            shoplist: []
        }
    }
    static defaultProps = {
        booklist: [
            {
                uid: "1",
                uname: "老笔斋的猫",
                img: require("./image/3.png").default,
                list: [
                    {
                        cover: require("./image/4.png").default,
                        brief: "刚刚来过",
                        right: "√",
                        student: "学生认证",
                        name: "沉默大多数1",
                        describe: "之前看完一直闲置在书架上,最近清理物品准备把它出",
                        former: "9成新",
                        expr: "快递包邮",
                        address: "广州 广东",
                        price: "￥16",
                        price2: "12",
                        checked: false
                    },
                    {
                        cover: require("./image/4.png").default,
                        brief: "刚刚来过",
                        right: "√",
                        student: "学生认证",
                        name: "奋斗多年",
                        describe: "之前看完一直闲置在书架上,最近清理物品准备把它出",
                        former: "9成新",
                        expr: "快递包邮",
                        address: "广州 广东",
                        price: "￥16",
                        price2: "12",
                        checked: false
                    }
                ],
            }, {
                uid: "2",
                uname: "七七",
                img: require("./image/3.png").default,
                list: [
                    {
                        cover: require("./image/4.png").default,
                        brief: "2小时以前来过",
                        right: "√",
                        student: "学生认证",
                        name: "海底两万里",
                        describe: "之前看完一直闲置在书架上,最近清理物品准备把它出...",
                        former: "9成新",
                        expr: "快递包邮",
                        address: "广州 广东",
                        price: "￥16",
                        price2: "12",
                        checked: false
                    }
                ]
            }, {
                uid: "3",
                uname: "老笔斋",
                img: require("./image/3.png").default,
                list: [
                    {
                        cover: require("./image/4.png").default,
                        brief: "刚刚来过",
                        right: "√",
                        student: "学生认证",
                        name: "沉默大多数1",
                        describe: "之前看完一直闲置在书架上,最近清理物品准备把它出",
                        former: "9成新",
                        expr: "快递包邮",
                        address: "广州 广东",
                        price: "￥16",
                        price2: "12",
                        checked: false
                    },
                    {
                        cover: require("./image/4.png").default,
                        brief: "刚刚来过",
                        right: "√",
                        student: "学生认证",
                        name: "奋斗多年",
                        describe: "之前看完一直闲置在书架上,最近清理物品准备把它出",
                        former: "9成新",
                        expr: "快递包邮",
                        address: "广州 广东",
                        price: "￥16",
                        price2: "12",
                        checked: false
                    }, {
                        cover: require("./image/4.png").default,
                        brief: "刚刚来过",
                        right: "√",
                        student: "学生认证",
                        name: "奋斗多年",
                        describe: "之前看完一直闲置在书架上,最近清理物品准备把它出",
                        former: "9成新",
                        expr: "快递包邮",
                        address: "广州 广东",
                        price: "￥16",
                        price2: "12",
                        checked: false
                    }
                ],
            }

        ]

    }
    // bookchose(i) {
    //     let book = this.props.booklist[i]
    //     let { shoplist } = this.state
    //     shoplist.push(book)
    //     this.setState({
    //         shoplist
    //     })
    //     // setTimeout(()=>{
    //     //     console.log(this.state.shoplist)
    //     // })
    // }

    // xuan(data) {    
    //     console.log();
    // }
    componentDidMount() {
        // dbConnTest(res=>{
        //     console.log(res);
        // });
    }
    //点击全选
    allCheck=(e)=>{
        this.props.allCheck(e.target.checked)
    }

    //点击去结算
    goclose=()=>{
         this.props.history.push("/close")
    }
    //购物车无勾选商品提示
     failToast=()=>{
        Toast.fail('请勾选要购买的商品 !!!', 1);
      }
    render() {
        // let bookItem = this.props.booklist.map((it, i) =>{
        //     return (
        //         <li key={i}>
        //             <Bookinfo bookinfo={it} index={i} 
        //                 bookchose={this.bookchose.bind(this)} xuan={this.xuan} ></Bookinfo>
        //         </li>
        //     )
                
        // })
        let n=0;
        let allMoney=0
        this.props.carList.forEach(item=>{
            if(item.ischeck){
                n++
                allMoney+=item.price*item.num
            }
        })
        return (
            <div className={style["index-root"]}>
                <h2 className={style["pag-title"]}> 购物车 </h2>

                {
                // bookItem.length > 0 ?

                localStorage.getItem("userList")?
                    this.props.carList.length>0?
                    <>
                        {/* <ul className={style["book-listbox"]}> */}
                            {/* {bookItem} */}
                        {/* </ul> */}
                        <div className={style["book-listbox"]}>
                        <Bookinfo bookinfo={this.props.carList}>
                        </Bookinfo>
                        </div>
                        <div className={style["footer"]}>
                            <div className={style["op-box"]}>
                                <div className={style["price-box"]}>
                                    <p><input type="checkbox" checked={this.props.carList.length===n} onChange={e=>this.allCheck(e)}></input>全部</p>
                                    <p>合计：￥<span>{allMoney}</span></p>
                                </div>
                                <div>
                                    {/* <button className={style["bian"]}>编辑</button> */}
                                    {
                                        n>0?<button className={style["jie"]} onClick={this.goclose}>结算</button>:
                                        <>
                                            <Button onClick={this.failToast} className={style["unjie"]}>结算</Button>
                                        </>
                                    }
                                </div>
                            </div>
                            <p className={style["han"]}>含有8元邮费,老用户免邮</p>
                        </div>
                    </>
                    :<>
                        <div className={style["cd-img"]}>
                            <img src={require("./image/2.png").default} />
                        </div>
                        <div className={style["shoplist-blank"]}>
                            <img src={require("../../common/imageDefault/shoplistblank.png").default} />
                            <p>购物车空空如也，赶快<span onClick={()=>{this.props.history.push("/home")}}>首页</span>购物~</p>
                        </div>
                    </>:<>
                        <div className={style["cd-img"]}>
                            <img src={require("./image/2.png").default} />
                        </div>
                        <div className={style["buy-login"]}>
                            <p>登录才可以看到我的购物车哦~</p>
                            <div onClick={()=>this.props.history.push("/login")}>立即登录</div>
                        </div>
                    </>
                }
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
    return {carList:state.carList};
}
const mapDispatchToProps= (dispatch)=>{
    return {
        allCheck:user=>{
            dispatch({type:"ALLCHECK",data:user})
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(ShopCart);